import React, { useState } from 'react'
import { IFormItem, Itype } from '@/base-ui/form'
import http from "@/services/request"
import { Space, Button, Select } from 'antd'
import { IToolButton } from '@/base-ui/tool-bar'
import { Input } from 'antd';
import { RightOutlined, UpOutlined } from '@ant-design/icons'
const { Option } = Select;
const { Search } = Input;
/**/

/* 搜索区域 */
export const PageSearchConfig: IFormItem[] = [
  {
    type: 'input' as Itype,
    label: '供货单位',
    name: 'deliveryUnit',
    placeholder: '请输入供货单位'
  },
  {
    type: 'input' as Itype,
    label: '车牌号',
    name: 'carNumber',
    placeholder: '请输入车牌号'
  },
  {
    type: 'input' as Itype,
    label: '货物名称',
    name: 'matName',
    placeholder: '请输入货物名称'
  },

  {
    type: 'input' as Itype,
    label: '手机号',
    name: 'phone',
    placeholder: '请输入手机号'
  },
  {
    type: 'input' as Itype,
    label: '毛重（kg）',
    name: 'grossWeight',
    placeholder: '请输入毛重（kg）'
  },
  {
    type: 'input' as Itype,
    label: '数量（kg）',
    name: 'quantity',
    placeholder: '请输入数量（kg）'
  },
  {
    type: 'input' as Itype,
    label: '监督人',
    name: 'supervisor',
    placeholder: '请输入监督人'
  },
  {
    type: 'input' as Itype,
    label: '收货人',
    name: 'receiver',
    placeholder: '请输入收货人'
  },
  {
    type: 'input' as Itype,
    label: '用户id',
    name: 'userId',
    placeholder: '请输入用户id'
  },
  {
    type: 'input' as Itype,
    label: '收货单位',
    name: 'receivingUnit',
    placeholder: '请输入收货单位'
  },
  {
    type: 'rangepicker' as Itype,
    label: '日期',
    name: 'date',
    otherOptions: {
      placeholder: ['开始日期', '结束日期']
    }
  },

  {
    type: 'select' as Itype,
    label: '皮重',
    name: 'tare',
    placeholder: '请选择皮重区间',
    options: [
      { label: '100kg以下', value: 'value1' },
      { label: '100kg-500kg', value: 'value2' },
      { label: '500kg-1000kg', value: 'value3' },
      { label: '1000kg以上', value: 'value4' }
    ]
  },
  {
    type: 'select' as Itype,
    label: '净重',
    name: 'netWeight',
    placeholder: '请选择净重区间',
    options: [
      { label: '100kg以下', value: 'value1' },
      { label: '100kg-500kg', value: 'value2' },
      { label: '500kg-1000kg', value: 'value3' },
      { label: '1000kg以上', value: 'value4' }
    ]
  },
  {
    type: 'select' as Itype,
    label: '毛重',
    name: 'grossWeight',
    placeholder: '请选择毛重区间',
    options: [
      { label: '100kg以下', value: 'value1' },
      { label: '100kg-500kg', value: 'value2' },
      { label: '500kg-1000kg', value: 'value3' },
      { label: '1000kg以上', value: 'value4' }
    ]
  },

  {
    type: 'input' as Itype,
    label: '备注',
    name: 'remark',
    placeholder: '请输入备注'
  },
]
export const addFormConfig: IFormItem[] = [
  {
    type: 'input' as Itype,
    label: '产品名称',
    placeholder: '请输入产品名称'
  },
  {
    type: 'input' as Itype,
    label: '供应商',
    placeholder: '请输入供应商'
  },

  {
    type: 'select' as Itype,
    label: '件数',
    placeholder: '请选择件数区间',
    options: [
      { label: '1000件以下', value: 'value1' },
      { label: '1000-5000件', value: 'value2' },
      { label: '5000-20000件', value: 'value3' },
      { label: '20000件以上', value: 'value4' }
    ]
  },
  {
    type: 'input' as Itype,
    label: '收货商',
    placeholder: '请输入收货商'
  },
  {
    type: 'input' as Itype,
    label: '备注',
    placeholder: '请输入备注'
  }
]
/* 工具栏区域 */

// 选择器配置
export const SearchSelector = (props: any) => {

  const [searchid, setsearchid]: any = useState()
  return <div style={{ display: 'inline-block', width: '380px', marginBottom: 10, marginRight: 10, float: 'right' }}>
    <Select defaultValue={Options[0].label} style={{ width: 100 }}
      defaultActiveFirstOption
      onSelect={(value: string, option: any) => {
        setsearchid(option.key)
      }}
    >
      {Options.map(i =>
        (<Option value={i.label} key={i.value} children={null}></Option>))}
    </Select>
    <Search
      placeholder="请输入您要查的数据"
      onSearch={(e) => {
        if (e === '') {
          http.get('/server/repositoryInfoSlaughter/list//1/20').then((res) => {
            props.dataSource(res.data.records)
          })
          return
        }
        switch (searchid) {
          case 'matName': {
            http(`/server/operationRecordSlaughter/fuzzyGetMatName/${e}`).then((res) => {
              props.dataSource(res.data)
            })
            break
          }
          case 'sum': {
            http(`/server/operationRecordSlaughter/fuzzyGetSum/${e}`).then((res) => {
              props.dataSource(res.data)
            })
            break
          }
          case 'operUserName': {
            http(`/server/operationRecordSlaughter/fuzzyGetOperUserName/${e}`).then((res) => {
              props.dataSource(res.data)
            })
            break
          }
          default: {
            break
          }
        }
      }}
      style={{ width: '280px' }}
      enterButton
    />
  </div>
}
export const Searchdow = () => {
  return
}
const Options = [
  { label: '材料名称', value: 'matName', onClick: (e: any) => { } },
  { label: '操作总数量', value: 'sum', onClick: (e: any) => { } },
  { label: '操作员名称', value: 'operUserName', onClick: (e: any) => { } }
]

//高级检索
export const UseSearch = (props: any) => {

  return (
    <Space style={{ float: 'right' }}>
      {props.isMoreSearchShow ? (
        <Button
          type="link"
          size="large"
          /* onClick={() => onMoreSearchClick(false)} */
          onClick={() => { props.setisMoreSearchShow(false); props.setsearchMore(false) }} >
          收起
          <UpOutlined />
        </Button>
      ) : (
        <div>
          <Button
            type="link"
            size="middle"
            onClick={() => { props.setisMoreSearchShow(true); props.setsearchMore(true) }}
          >
            高级检索
            <RightOutlined style={{ marginLeft: '1px' }} />
          </Button>
        </div>
      )}
    </Space>
  )
}


// 按钮组
export const buttonGroup: IToolButton[] = [
  { type: 'create', text: '新增仓库', isShow: true, onClick: () => { } },
  { type: 'delete', text: '批量删除', isShow: true, onClick: () => { } },
  { type: 'import', text: '导入', isShow: true, onClick: () => { } },
  { type: 'export', text: '导出', isShow: true, onClick: () => { } },
]


//复选框的接口
export interface DataType {
  id: number
  name: string;
  age: number;
  address: string;
}
